<template>
    <div class="see_pic-wrapper">
  <span>
      <!--<a v-if="items&&items.length>0" ref="myel" class="mya" href="javascript:;" @click.stop.prevent="toSee">{{col.show_txt}}</a>-->
      <button v-if="items&&items.length>0" ref="myel" v-show="!myloading" type="button" class="ui tiny button"
              @click.stop.prevent="toSee">{{col.show_txt}}</button>
    <button v-show="myloading" class="ui tiny loading button">Loading</button>
    </span>
    </div>
</template>
<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import _ from 'lodash';


    const IMGPRE = tool.IMGPRE;

    export default {
        data() {
            return {
                get_info_done: false,
                no_h: false,
                clicked: false,
                pic_ind: 0
            }
        },
        watch: {},
        methods: {
            toSee(){
                this.clicked = true;
                let items = this.items;
                items.forEach((item, ind) => {
                    this.pic_ind++;

                    if (!item.h) {
                        this.no_h = true;
                        let url_img = item.src + '?x-oss-process=image/info';
                        let url = tool.getApi(this, 'Get', 'getOssPicInfo');
//                      tool.cl('item.h:', item.h);

                        util.http.SR(this, url, {url: url_img}, null, (rs) => {
                            if (rs) {
                                item.w = rs.ImageWidth.value;
                                item.h = rs.ImageHeight.value;

                                items[ind] = item;
//                              tool.cl('this.pic_ind:', this.pic_ind);
                                if (this.pic_ind == items.length) {
                                    this.get_info_done = true;
                                }
                            }
                        });
                    } else {
//                      tool.cl('this.pic_ind2:', this.pic_ind);
//                      tool.cl('this.no_h:', this.no_h);
                        if (this.pic_ind == items.length && !this.no_h) {
                            this.get_info_done = true;
                        }
                    }

                });
                util.mywait(this, 'get_info_done', () => {
                    this.$photoswipe.open(0, items, this.$refs.myel);

                }, 0, 100, 60);

            }
        },
        props: ['col'],
        computed: {
            myloading(){
                return !this.get_info_done && this.clicked;
            },
            myid(){
                return `see_pic_` + Math.random();
            },
            items(){
                let pics = this.col.val;
                let pic_dir = this.col.pic_dir;

                let items = null;
                if (util.isArray(pics))
                    items = pics;
                else {
//          items= JSON.parse(pics);
                    items = pics.split('|');
                }

                items = items.map(item => {
                    let tmp = item.split('.')[0];
                    let [, , w, h] = tmp.split('_');
                    item = `${IMGPRE}images/${pic_dir}/${item}`;

                    return {
                        src: item,
                        w, h
                    }
                });
                return items;
            }
        },
        created() {
        }
    };
</script>
<style rel="stylesheet/less" scoped lang="less">
    @import "../../../common/style/mixin";

    .see_pic-wrapper {
        .mya {
            .mya();
        }
    }
</style>
